题 目:商业Flash实例制作--信息表单

1.在影片中添加组件.

　　2.配置影片中的组件.

　　3.在影片中添加动作脚本使组件正常工作.

　　为了使用户能够顺利入门，这里已提供了这个影片的背景、相关文本字段和图像。只需要再添加并配置组件和动作脚本以使之成为一个交互式表单即可。

　　创建窗体

　　为了方便大家的制作，首先打开我们提供的table.fla这个Flash源文档,能够在这个文档的基础上进行下面的工作,影片打开后的界面如图11所示:

　　图1 表单原始界面

　　添加组件

　　首先需要向影片中添加组件，并把他们放置在舞台上。按照计划需要向第一个表单中添加一个复选框、一个组合框和一个普通按钮,还要在第二个表单中添加一个普通按钮。

　　要向影片中添加组件，方法很简单,能够把相应的组件从“组件”面板中拖到舞台上，或在“组件”面板中双击要添加的组件,组件会自动放置在舞台的中央。当向影片中添加组件后，影片的“库”面板中也会显示该组件。

　　给影片添加组件,一个好的习惯就是为组件单独建立一层,这样便于对组件的编辑和修改. 所以在影片中新创建一个图层并命名为 UI,表单中的任何组件将放在这个层中。

　　在时间轴的 UI 层中单击第 6 帧,选择“插入/空白关键帧”菜单命令,添加空白关键帧,目的是作为两个表单之间的分界线,前6帧用于第1个表单,第6帧以后用于第2个表单.

　　添加复选框：

　　在 UI 层中选择第 1 帧,把“CheckBox”组件从“组件”面板拖到舞台中,把他放在询问用户是否想进入博彩那一段文本的下面.如图2所示：
图2 添加CheckBox”组件

　　新添加的“CheckBox”组件会出现在“库”面板的“Flash UI Components”文档夹中,如图3所示：
图3 组件添加到Flash UI Components中

　　添加组合框：

　　使用“ComboBox”组件创建一个简单的下拉菜单，其中包含用户能够选择的项目。也能够使用“ComboBox”构建更为复杂的下拉菜单，这个菜单能够自动滚动到以用户输入到文本字段中的字母开头的菜单项。

　　把“ComboBox”组件从“组件”面板拖到舞台中。把他放在“选择用户喜欢的颜色:”文本下,如图4所示：
图4 添加ComboBox组件

　　“ComboBox”组件也会出现在“库”面板的“Flash UI Components”文档夹中,如上图13-22所示。

　　添加普通按钮

　　使用“PushButton”组件创建两个普通按钮,一个按钮放在第1个表单中，用来提交表单中的信息。另一个按钮放在第2个表单中，用来返回到第1个表单，并把以前提交的值填回第1个表单中。

　　把“PushButton”组件从“组件”面板拖到舞台中,把他放在窗体的右下角，使他和“姓名:”及“电子邮件:”文本字段保持在同一水平线上,如图5所示：
图5 添加PushButton组件

　　“PushButton”组件也会出现在“库”面板的“Flash UI Components”文档夹中, 如上图5所示。

　　然后选中第6帧,同样将一个“PushButton”组件放到表单的右小角,使他和”假如用户想再次参加比赛，请单击“返回”以返回到表单1”文本字段保持在同一水平线上,如图6所示:
图6 添加PushButton组件

　　到此为止,影片中的任何组件就添加完成了,接下来需要对所添加的组件进行配置.

　　配置组件

　　组件添加到影片中后,还不能正常的工作,需要对其进行配置，用正确的信息配置组件以便用户选择。

　　能够使用“属性”面板或“组件参数”面板的“参数”选项卡来配置组件的参数。

　　高级用户也能够使用每个组件的 API 方法和属性来配置组件的参数、大小、外观和其他属性,每个组件元素可用的方法和属性列在组件名下面的动作脚本字典里。

　　接下来就对表单中的每个组件进行配置.

　　配置复选框:

　　1.在 UI 层中选择第 1 帧，然后选择舞台中的“CheckBox”组件,他的任何参数会显示在“属性”面板中,如图7所示:
图7 “CheckBox”组件“属性”面板

　　2.在“实例名称”文本框中输入 sweepstakes_box,作为此组件的Action控制名。

　　3.在“Label”(标签)文本框中键入文本“妙极了!”,做为此复选框的标签,播放效果如图13-27所示:
图8 复选框组件添加标签

　　4.在“Initial Value”(初始值)参数弹出式菜单中，选择“True”。这指定“CheckBox”组件的初始状态是选中 (True) 还是没有选中 (False)。

　　5.在“Lable Placement”(标签定位)参数弹出式菜单中，保留默认值为右对齐。标签将显示在复选框的右边。

　　6.无需更改 Change Handler 参数的默认值Change Handler 参数是用户希望在选择某个项目时执行的函数,此函数必须和组件实例定义在同一个时间轴里,此参数是可选的。只有在希望用户访问组件时应产生一个动作的情况下，才需要指定这个参数。

　　完成上述操作后，“属性”面板应该是如图9所示的样子：

图9 配置完成后的“CheckBox”组件“属性”面板

　　配置组合框:

　　1.在舞台中选择“ComboBox”组件,他的相关参数会显示在“属性”面板中,如图10所示:
图10 “ComboBox”组件“属性”面板

　　2.在“实例名称”文本框中键入color_box ,作为此组件的Action控制名。

　　3.确保将“Editable”(可编辑)参数设为 False,这样能够防止用户键入自已的文本。

　　4.Labels (标签)参数显示用户能够选择的一个值列表,单击“Labels”字段，然后单击放大镜按钮 打开“值”弹出式窗口,单击加号 ( ) 按钮能够向列表中输入一个新的值,如图11所示:
图11 “值”弹出式窗口

　　5.单击 default value 字段，然后键入“珍珠白”作为第 1 个值。

　　6.单击加号 ( ) 按钮输入下一个值,单击 default value 字段，然后键入“宝石蓝”作为下一个值。

　　7.用相同的方式，把“翡翠绿”也添加到列表中。假如想继续向列表中添加项目,能够重复此布添加更多的项目.

　　完成上述操作后，“值”弹出式窗口应该如图12所示:

图12 添加项目后的“值”弹出式窗口

　　8.单击“确定”按钮关闭“值”弹出式窗口。

　　9.Data(数据) 参数是可选的,用来指定和列表框中的项目（标签）相关联的值,在本实例中无需配置此项。

　　10.Row Count (行数)参数指定窗口中显示多少行,由于有三个选项，所以把值改为3即可。

　　11.无需输入 Change Handler 参数的名称。

　　完成上述操作后，“属性”面板应该如图13所示:
图13 配置完成后的“ComboBox”组件“属性”面板

　　配置普通按钮:

　　1.在图层Ui的第 1 帧中选择“PushButton”组件,组件的相关参数显示在“属性”面板中,如图14所示:

图14 “PushButton”组件“属性”面板

　　2.在“属性”面板“实例名称”文本框中，键入 submit_btn, 作为此组件的Action控制名。

　　3.在“属性”面板“Label”(标签)文本框中，键入文本“提交”,此文本会显示在按钮上。

　　4.键入 onClick 作为“Click Handler”的名称,后面将编写动作脚本来定义“Click Handler”应该执行的操作。

　　完成上述操作后，“属性”面板应该如图15所示

图16 配置完成后的“PushButton”组件“属性”面板

　　5.在图层Ui的第 6 帧中选择“PushButton”组件,能够按照第1帧中类似的方法配置其属性.。

　　6.在“属性”面板“实例名称”文本框中，键入 return_btn, 作为此组件的Action控制名。

　　7.在“属性”面板“Label”(标签)文本框中，键入“返回”作为按钮上显示的提示文字。

　　8.键入 onClick 作为“Click Handler”的名称。

　　到此为止,表单中的任何组件就配置完成了,但是现在表单还不能正常工作,需要编写Action动作脚本来收集表单信息并进行处理.

　　编写动作脚本来收集数据

　　一些动作脚本会用在整个影片中，而另一些只和特定的帧相关。下表能够帮助用户理解实例名称。

　　实例名称说明color_box表单1上的“Color”组合框sweepstakes_box表单1上的“Sweepstakes”复选框submit_btn表单1上的“Submit”普通按钮name表单1上的名称输入文本框email表单1上的电子邮件地址输入文本框return_btn表单2中的“Return”普通按钮name_result表单2中显示用户名的动态文本框email_result表单2中显示用户电子邮件地址的动态文本框color_result表单2中显示用户颜色选择的动态文本框sweepstakes_text表单2中根据用户是否选择参加搏彩来显示不同文本的动态文本框

　　为整个影片编写动作脚本:

　　组件动作脚本放置在关键帧中,“Click Handler”参数指定当“PushButton”组件被激活时进行的操作,默认值是 onClick，这意味着当用户单击某个普通按钮时，他会被激活。首先要为 onClick 创建一个函数,这是个分支函数，他首先判断被按下的是“提交”按钮还是“返回”按钮，然后据此执行动作。

　　1．创建一个新的层，并命名为 All Actions。这将用于在整个影片中运行的动作脚本。

　　2．假如“动作”面板没有打开，选择“窗口/动作”菜单命令。

　　3．按下 Control Shift E 键 (Windows) 或 Command Shift E 键 (Macintosh)，或单击右上角的控制图标（一个上面有复选标记的三角形）并从弹出菜单中选择“专家模式”，转换到专家模式。

　　4．首先，输入普通按钮的回调函数。这是个条件语句，根据单击的按钮进行分支。假如单击的是“提交”按钮，他将分支到 getResults 函数并进入表单2，假如单击的是“返回”按钮，他将进入表单1。

　　在“动作”面板中输入下面的代码。

//单击鼠标回调

　　function onClick(btn) {

　　if (btn == submit_btn) {

　　getResults();

　　gotoAndStop("pg2");

　　} else if (btn == return_btn) {

　　gotoAndStop("pg1");

　　}

　　}

　　注意：虽然不建议这样做，但假如用户不想编写动作脚本，能够从本实例中复制这段文本并粘贴到“动作”面板。

　　5．现在编写 getResults 函数。该函数能够从搏彩复选框和颜色组合框中获取结果。他以标签的形式从组合框中得到结果，因而能够显示结果。

　　//从pg 1中得到返回值

　　function getResults() {

　　sweepstakes_result = sweepstakes_box.getValue();

　　color_result = color_box.getSelectedItem().label;

　　selectedItem = color_box.getSelectedIndex();

　　}

　　6．现在编写 initValues 函数。这将用用户以前选择的值初始化表单1中的值。当用户单击“返回”按钮时，他会运行。

　　// 初始化pg 1

　　function initValues() {

　　sweepstakes_box.setValue(sweepstakes_result);

　　if (!started) {

　　color_box.setSelectedIndex(0);

　　started = true;

　　} else {

　　color_box.setSelectedIndex(selectedItem);

　　}

　　}

　　7.最后，在动作脚本的开头添加对 initValues 函数的调用。完成上述操作后，动作脚本应该是下面的样子：

　　initValues();

　　// push button callback

　　function onClick(btn) {

　　if (btn == submit_btn) {

　　getResults();

　　gotoAndStop("pg2");

　　} else if (btn == return_btn) {

　　gotoAndStop("pg1");

　　}

　　}

　　// initialize the values on pg 1 with the values the user has previously selected

　　function initValues() {

　　sweepstakes_box.setValue(sweepstakes_result);

　　if (!started) {

　　color_box.setSelectedIndex(0);

　　started = true;

　　} else {

　　color_box.setSelectedIndex(selectedItem);

　　}

　　}

　　// get results from pg 1

　　function getResults() {

　　sweepstakes_result = sweepstakes_box.getValue();

　　color_result = color_box.getSelectedItem().label;

　　selectedItem = color_box.getSelectedIndex();

　　}

　　用户已完成了要在整个影片中运行的脚本。但是，仍然需要为表单1和表单2中的帧添加脚本。

　　为每一个关键帧添加动作脚本:

　　只有当用户选择特定的帧时，才需要执行某些动作脚本。要使动作脚本工作，需要给每个关键帧命名。

　　1.创建一个新层，并命名为 Frame Actions。选择第 1 帧，然后选择“插入/空白关键帧”菜单命令来插入一个空白关键帧。使用属性检查器将关键帧命名为 pg1。用同样的方式，在第 6 帧中插入一个关键帧，并命名为 pg2。

　　2.在 Frame Actions 层的第 1 帧中选择关键帧，并编写下面的动作脚本以在第 1 帧 (pg1) 停止影片。

　　stop();

　　3.（可选）假如想在用户选择了复选框时显示某一文本，而在用户未选择时显示其他文本，能够编写一条带有文本的条件语句，将其插入表单2的 sweepstakes_text 动态文本字段。在 Frame Actions 层中选择名为 pg2 的关键帧，并在“动作”面板中写入以下内容：

　　// sweepstakes text

　　if (sweepstakes_result==true) {

　　sweepstakes_text = "You have been entered in the Stiletto Fantasy sweepstakes. Winners are announced at the end of each month.";

　　} else {

　　sweepstakes_text = "You have not been entered in the Stiletto Fantasy sweepstakes.";

　　}

　　注意：不要剪切此动作脚本并将其粘贴到“动作”面板。他不会正确运行，因为在第 1 行和第 2 行的文本之间有分行符。

　　测试影片

　　完成上面的任何工作后,还需要对影片进行测试,以检查影片是否工作正常.

　　1.选择“控制/测试影片”菜单命令,影片即可在 Flash Player 中运行。

　　2.通过在表单中选择和不选择复选框来确定表单是否工作。

　　3.从组合列表框中选择一种颜色，以确定是否出现第2个表单。

　　4.完成测试后，在播放器中选择“文档/关闭菜单”命令来关闭影片。

　　5.假如发现有任何错误，请使用箭头工具来选择组件，然后在属性检查器中进行纠正,假如需要，重新测试影片。